<script setup>
import { postVote } from '@/axios/api/posts'
import { usePostDetailQuery } from '@/composables/usePostDataQuery'
import { useRoute } from 'vue-router'
import { getTimeRemaining } from '@/utils/transIUtils'

const props = defineProps({
  isVoteResult: Boolean,
  myVoteResult: String,
  data: {
    type: Object,
    required: true,
  },
})

const myVoteIds = ref([])

const route = useRoute()
const { refetch } = usePostDetailQuery(route.params.id)

const options = ref([])

const handleClick = (optionId) => {
  console.log(optionId);
  if (props.data.type == 1) {
    options.value.forEach(item => {
      if (item.id == optionId) {
        item.isActive = true
      } else {
        item.isActive = false
      }
    })
  } else {
    options.value.forEach(item => {
      if (item.id == optionId) {
        item.isActive = !item.isActive 
      } 
    })
  }
}


const handleVoteClick = (optionId) => {
  console.log('optionId', optionId);
  let resultData = []
  options.value.map(item => {
    if(item.isActive) {
      resultData.push(item.id)
    }
  })

  // return
  postVote({
    id: props.data.id,
    vote: resultData,
  }).then(() => {
    refetch()
  })
}

// 监听 props.isVoteResult 的变化
watch(
  () => props.isVoteResult,
  (newVal) => {
    if (newVal && props.myVoteResult) {
      try {
        myVoteIds.value = JSON.parse(props.myVoteResult)
      } catch (e) {
        console.error('解析投票结果失败:', e)
        myVoteIds.value = []
      }
    }
  },
  { immediate: true }, // 立即执行一次
)

watch(
  () => props.data.options,
  (newVal) => {
    let data = JSON.parse(JSON.stringify(newVal))
    data.forEach(item => {
      item.isActive = false
    })
    options.value = data

  },
  { immediate: true }, // 立即执行一次
)
// watch(
//   () => detailData,
//   (newVal) => {
//     console.log('newVal===========', newVal);
//     updateResult()
//     if (newVal) {
//       options.value = newVal
//     }
//   },
//   { immediate: true }, // 立即执行一次
// )
</script>

<template>
  <div class="p-3 mt-4 rounded-lg bg-[--fill-1] flex flex-col gap-2">
    <div class="text-sm font-medium">{{ data.title }} ({{ data.type == 1 ? '单选项' : '多选项' }})</div>

    <div class="flex flex-col gap-2">
      <template v-if="!isVoteResult">
        <!--   
         -->
        <div v-if="data.type == 1" v-for="(option, idx) in options" :key="idx"
          class="bg-[--fill-0] rounded-sm text-center w-full border-1 border-transparent hover:border-[#2e5592] cursor-pointer"
          :class="{ 'active': option.isActive }" @click="handleClick(option.id)">
          <!--  @click="handleVoteClick(option.id)" -->
          {{ option.content }}
        </div>
        <div :class="{ 'active': option.isActive }" @click="handleClick(option.id)" v-for="(option, index) in options"
          :key="index"
          class="bg-[--fill-0] rounded-sm text-center w-full border-1 border-transparent hover:border-[#2e5592] cursor-pointer"
          v-else>
          <!--  
         @click="handleVoteClick(option.id)"  -->
          {{ option.content }}
        </div>
      </template>

      <template v-else>
        <div v-for="option in data.options" :key="option.id"
          class="bg-[--fill-0] rounded-sm text-center w-full border-1 border-transparent flex justify-between px-4 items-center"
          :class="{ 'border-[#000]': myVoteIds.includes(option.id) }">
          <div>{{ option.content }}</div>
          <div class="text-sm text-gray-500">{{ option.ticketNum }}票</div>
        </div>
      </template>
    </div>

    <div class="flex justify-between">
      <div class="text-xs text-gray-500">
        {{ getTimeRemaining(data.time) === '已结束' ? '已结束' : '还有' + getTimeRemaining(data.time) + '结束' }}
      </div>
      <LfButton v-if="!isVoteResult" @click="handleVoteClick"  type="primary" size="small"
        needLogin>
        投票
      </LfButton>
    </div>
  </div>
</template>
<style scoped>
.active {
  background-color: #2e5592 !important;
  color: #fff !important;
}
</style>
